<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>在vue中使用插槽</title>
	<script src="vue.js"></script>
</head>
<body>
	<!-- 插槽 slot, 在子组件的template中 <slot></slot> 引入的就是我们直接插在 child中的内容 -->
	<div id="root">
		<child>
			<h1>Dell</h1>
		</child>
	</div>

	<script>
		Vue.component('child',{
			template: `<div>
							<p>hello</p>
							<slot>默认内容</slot>
						</div>`
		})

		var vm = new Vue({
			el: '#root'
		})
	</script> 
	

	<hr>
	<!-- ---------------------------------------------------- -->
	<!-- 具名插槽, 指定插槽的名字 -->
	<div id="root1">
		<body-content>
			<div class="header" slot="header">header</div>
			<div class="footer" slot="footer">footer</div>
		</body-content>
	</div>

	<script>
		Vue.component('body-content', {
			template: `
				<div>
					<slot name="header">默认值头部</slot>
					<div class='content'>content</div>
					<slot name="footer">默认值底部</slot>
				</div>
			`
		})

		var vm1 = new Vue({
			el: '#root1'
		})
	</script>


</body>
</html>